<template>
  <el-button type="danger"
             @click="filterDic">过滤数据字典</el-button>
  <el-button type="success"
             @click="filterNull">过滤空数据</el-button>
  <el-button type="primary"
             @click="filter">不过滤</el-button>
  <p>{{search}}</p>
  <avue-crud :key="reload"
             :data="data"
             v-model:search="search"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      search: {
        cascader: [0, 1],
        tree: 0
      },
      reload: Math.random(),
      data: [{
        cascader: [0, 1],
        tree: 0
      }],
      option: {
        column: [{
          label: '姓名',
          prop: 'name',
          search: true
        }, {
          label: '级别',
          prop: 'cascader',
          type: 'cascader',
          search: true,
          dicData: [{
            label: '一级',
            value: 0,
            children: [
              {
                label: '一级1',
                value: 1,
              }, {
                label: '一级2',
                value: 2,
              }
            ]
          }],
        },
        {
          label: '树型',
          prop: 'tree',
          type: 'tree',
          search: true,
          dicData: [{
            label: '一级',
            value: 0,
            children: [
              {
                label: '一级1',
                value: 1,
              }, {
                label: '一级2',
                value: 2,
              }
            ]
          }]
        }]
      }
    }
  },
  methods: {
    refresh () {
      this.reload = Math.random()
    },
    filter () {
      this.option.searchFilterDic = false
      this.option.searchFilterNull = false
      this.refresh()
    },
    filterDic () {
      this.option.searchFilterDic = true
      this.refresh()
    },
    filterNull () {
      this.option.searchFilterNull = true
      this.refresh()
    }
  }
}
</script>